import autoAnimate from '/src/plugin/auto_animate/auto-animate.min.js'
// 创建一个对象来存储enableAnimation函数，管理动画状态
let animationControls = {};
// 导航列表根节点
let navRoot = null
// 当前导航列表页面index
let current_list_index = 0
// 鼠标触发滑动阈值
let moveThreshold = 150;
// 鼠标初始位置
let startX = 0;
// Grid表格的最大单元格数量
let list_item_num = 0;
// 拖动元素信息
let draggedElement = null;
let lastHoverElement = null;
let draggedIndex = -1;
// 右键时，点击的元素
let click_item = null
// 设置窗口打开状态
let setting_open = false
// 编辑网站信息窗口打开状态
let editing_open = false
// 搜索引擎
let search_engine = {}

document.addEventListener('DOMContentLoaded', function () {
    initSystemConfig()
    loadPages();
    // 监听：鼠标滚轮事件
    document.addEventListener('wheel', debouncedHandleWheel);
    // 监听：鼠标按压事件
    document.addEventListener("mousedown", handleMouseDown)
    // 监听：拖动开始时，触发
    document.addEventListener("dragstart", handleDragStart);
    // 监听：拖动中，持续触发。默认阻止放置效果，需要设置e.preventDefault();允许放置。
    document.addEventListener("dragover", handleDragover);
    // 监听：拖动结束时，触发
    document.addEventListener("dragend", handleDragEnd);
    // 监听右键菜单
    document.addEventListener('contextmenu', HandleContextMenu);
    // 绑定点击事件
    document.getElementById("importData").addEventListener("click", importData)
    document.getElementById("exportData").addEventListener("click", exportData)
    document.getElementById("updateItemInfo").addEventListener("click", updateItemInfo)
    document.getElementById("closeItemInfo").addEventListener("click", closeEditingDiv)
    document.getElementById("searchId").addEventListener("click", switchSearch)
    document.getElementById("searchBtn").addEventListener("click", goSearch)
    // 快捷键
    document.addEventListener('keydown', function (event) {
        switch (event.key) {
            case 'ArrowLeft': {
                if (event.target.tagName === "BODY") {
                    // 禁止原生事件
                    event.preventDefault();
                    updatePage(-1, true)
                }
                break
            }
            case 'ArrowRight': {
                if (event.target.tagName === "BODY") {
                    // 禁止原生事件
                    event.preventDefault();
                    updatePage(1, true)
                }
                break
            }
            case 'Enter': {
                if (event.target.tagName === "INPUT" && event.target.className === "search-input") {
                    // 禁止原生事件
                    event.preventDefault();
                    goSearch()
                }
                break
            }
            default :
                return
        }
    })
    // 监听：浏览器通信消息事件
    chrome.runtime.onMessage.addListener((msg) => {
        if (msg.data === 'refresh') {
            window.location.reload()
        }
    })
})

// 初始化系统配置
function initSystemConfig() {
    applyBackgroundImage().then(() => {
    })
    getAndApplyBackgroundImageBrightness()
    let rows = getAndApplyGridRows()
    let columns = getAndApplyGridColumns()
    let gridItemWidth = getAndApplyGridItemWidth()
    getAndApplyGridItemHeight()
    getAndApplyGridItemContentGap()
    getAndApplyGridItemIconWidth()
    getAndApplyGridItemTextSize()
    getAndApplyGridItemTextShow()
    list_item_num = rows * columns
    let moveThreshold2 = Number(gridItemWidth.replace('px', '')) * 2
    moveThreshold = moveThreshold2 < moveThreshold ? moveThreshold2 : moveThreshold
    search_engine = getStorageSearchDef()
    document.getElementById("searchId").src = search_engine.icon
}

// 模拟请求接口加载页面和列表
function loadPages() {
    // 渲染数据
    navRoot = document.getElementById("navRoot");
    navRoot.innerHTML = ''
    // 可惜了，不能用，会出现意料之外的动画
    // setAnimation(navRoot, true)
    // 加载数据
    let pagesData = getStorageNavData();
    if (pagesData.length === 0) {
        // 初始化，默认数据
        pagesData = [{
            pageId: "page1",
            items: [{
                id: "1",
                text: "游园拾忆",
                icon: 'http://8.138.240.104:9999/favicon.ico',
                uri: 'http://8.138.240.104:9999/index.html'
            }],
        }];
        saveDataToDB(pagesData)
    }

    // 动态生成页面和列表
    pagesData.forEach(page => {
        appendPageData(page)
    })
}

// 重新计算导航页面数据，并重新加载页面和列表
function recalculateNavDataAndReload() {
    // 重新计算导航页面数据
    let isUpdate = recalculateNavData()
    if (isUpdate) {
        // 重新加载页面和列表
        loadPages();
    }
}

// 创建页面,并动态填充页面数据
function appendPageData(page) {
    navRoot = document.getElementById("navRoot");
    // 创建片段
    const fragment = document.createDocumentFragment();

    const pageDiv = document.createElement("div");
    pageDiv.className = "page";
    pageDiv.id = page.pageId;

    const listDiv = document.createElement("div");
    listDiv.className = "list";
    listDiv.id = page.pageId + "_list";
    listDiv.dataset.key = page.pageId + "_list";

    page.items.forEach(item => {
        const itemDiv = document.createElement("div");
        itemDiv.className = "item";
        itemDiv.id = item.id;
        itemDiv.dataset.id = item.id;
        itemDiv.dataset.icon = item.icon;
        itemDiv.dataset.text = item.text;
        itemDiv.dataset.uri = item.uri;
        itemDiv.dataset.key = item.id;

        const item_img_div = document.createElement('div');
        item_img_div.id = item.id + '-icon-div';
        item_img_div.className = 'item-icon-div';
        item_img_div.draggable = true; // 设置item里img-div不能拖动，这样拖动img就是拖动item。
        item_img_div.title = item.text;
        item_img_div.onclick = function () {
            openPage(item.uri);
        };
        const item_img = document.createElement('img')
        item_img.id = item.id + '-img';
        item_img.loading = 'lazy';
        item_img.draggable = false; // 设置item里img不能拖动，这样拖动img就是拖动item。
        item_img.className = 'item-icon';
        item_img.src = item.icon;
        item_img.onerror = function () {
            item_img.src = '/src/image/public.png';
        }
        item_img_div.appendChild(item_img);

        const item_text = document.createElement("span");
        item_text.id = item.id + '-span-text';
        item_text.className = 'item-text';
        item_text.textContent = item.text;

        itemDiv.appendChild(item_img_div);
        itemDiv.appendChild(item_text);
        listDiv.appendChild(itemDiv);
    });
    pageDiv.appendChild(listDiv)

    fragment.appendChild(pageDiv);
    navRoot.appendChild(fragment)

    resetDianDianDian()
    setAnimation(listDiv, true)
}

// 创建空页面
function createEmptyPage() {
    const data = {
        pageId: "page" + getNewPageId(),
        items: []
    }
    appendPageData(data)
}

// 重制小圆点
function resetDianDianDian() {
    let diandiandian = document.getElementById("diandiandian");
    diandiandian.innerHTML = ''
    const pages = document.querySelectorAll(".page");
    if (pages.length <= 1) {
        return
    }
    // 创建片段
    const fragment = document.createDocumentFragment();
    pages.forEach((page, index) => {
        const dian = document.createElement("div");
        dian.className = current_list_index === index ? "dian active" : "dian";
        dian.id = page.id + 'dian';
        dian.dataset.index = String(index);
        dian.onclick = function (e) {
            goToPage(e);
        };
        fragment.appendChild(dian)
    })
    diandiandian.appendChild(fragment)
}

// 切换导航页
function updatePage(pn, loop = false) {
    navRoot = document.getElementById("navRoot");
    if (pn > 0) {
        // 下一页
        let new_index = current_list_index + 1
        let pageNum = navRoot.querySelectorAll('.page').length;
        if (new_index >= pageNum) {
            if (loop) {
                new_index = 0
            } else {
                return
            }
        }
        document.getElementsByClassName("dian")[current_list_index].className = 'dian'
        navRoot.scrollTo({
            left: new_index * navRoot.clientWidth,
            behavior: 'smooth'
        });
        document.getElementsByClassName("dian")[new_index].className = 'dian active'
        current_list_index = new_index
    } else {
        // 上一页
        let new_index = current_list_index - 1
        let pageNum = navRoot.querySelectorAll('.page').length;
        if (current_list_index === 0) {
            if (loop) {
                new_index = pageNum - 1
            } else {
                return
            }
        }
        document.getElementsByClassName("dian")[current_list_index].className = 'dian'
        navRoot.scrollTo({
            left: new_index * navRoot.clientWidth,
            behavior: 'smooth'
        });
        document.getElementsByClassName("dian")[new_index].className = 'dian active'
        current_list_index = new_index
    }
}

// 前往指定导航页
function goToPage(e) {
    document.getElementsByClassName("dian")[current_list_index].className = 'dian'
    let dian_index = e.target.getAttribute("data-index")
    current_list_index = Number(dian_index)
    navRoot = document.getElementById("navRoot");
    navRoot.scrollTo({
        left: dian_index * navRoot.clientWidth,
        behavior: 'smooth'
    });
    e.target.className = 'dian active'
}

// 使用防抖函数包装：更新页面位置
const debouncedHandleUpdatePage = debounce(updatePage, 300, true);

// 鼠标滚轮事件处理函数
function handleWheel(event) {
    if (setting_open || editing_open) {
        return
    }

    if (event.deltaY > 0) {
        // 向下滚动，切换到下一页
        updatePage(1, true);
    } else if (event.deltaY < 0) {
        // 向上滚动，切换到上一页
        updatePage(-1, true);
    }
}

// 使用防抖函数包装：鼠标滚轮事件处理函数
const debouncedHandleWheel = debounce(handleWheel, 300, true);

// 鼠标按压事件处理函数
function handleMouseDown(e) {
    const list_Item = e.target.closest('.item-icon-div');
    const setting = e.target.closest('.setting');
    const editing = e.target.closest('.editing');
    const search = e.target.closest('.search-div');
    if (!list_Item && !setting && !editing && !search) {
        startX = e.clientX
        document.addEventListener("mousemove", handleMouseMove)
        document.addEventListener("mouseup", handleMouseUp)
    }
}

// 鼠标移动事件处理函数
function handleMouseMove(event) {
    let currentX = event.clientX
    if (currentX - startX < 0) {
        if (startX - currentX > moveThreshold) {
            // 向左滑动，切换到下一页
            debouncedHandleUpdatePage(1);
            document.removeEventListener("mousemove", handleMouseMove)
        } else {
            navRoot = document.getElementById("navRoot");
            navRoot.scrollTo({
                left: (current_list_index * navRoot.clientWidth) + (startX - currentX),
            });
        }
    }
    if (currentX - startX > 0) {
        if (currentX - startX > moveThreshold) {
            // 向右滑动，切换到上一页
            debouncedHandleUpdatePage(-1);
            document.removeEventListener("mousemove", handleMouseMove)
        } else {
            navRoot = document.getElementById("navRoot");
            navRoot.scrollTo({
                left: current_list_index * navRoot.clientWidth - (currentX - startX),
            });
        }
    }
}

// 鼠标释放事件处理函数
function handleMouseUp() {
    navRoot = document.getElementById("navRoot");
    document.removeEventListener("mousemove", handleMouseMove)
    document.removeEventListener("mouseup", handleMouseUp)
    navRoot.scrollTo({
        left: current_list_index * navRoot.clientWidth,
        behavior: 'smooth'
    });
}

// 开始拖动事件处理函数：event是拖动元素
function handleDragStart(e) {
    if (e.target.className === "item-icon-div") {
        // 创建一个新页面，备用
        createEmptyPage()
        // 记录拖动元素信息:拖动的是图标，但移动的是整个item，所以取父节点
        draggedElement = e.target.parentElement;
        lastHoverElement = e.target.parentElement
        draggedIndex = Array.from(draggedElement.parentElement.children).indexOf(draggedElement);
        // 设置拖动时元素样式。
        draggedElement.classList.add('dragging');
    }
}

// 拖动中事件处理函数：event是当前位置上的元素
function handleDragover(e) {
    // 没有拖动元素，中止
    if (!draggedElement) return;

    // 判断区域是否是有效区域
    const targetList = e.target.closest(".list");
    if (!targetList) {
        // 显示翻页区域
        showOptPageStyle()
        // 判断是否翻页区域
        if (e.target.closest('#prePage')) {
            debouncedHandleUpdatePage(-1);
        }
        if (e.target.closest('#nextPage')) {
            debouncedHandleUpdatePage(1);
        }
        return;
    }

    // 检查目标列表是否属于拖动元素的原始列表
    const isSameList = targetList === draggedElement.closest(".list");
    // 检查目标列表中的 item 数量
    const itemCount = targetList.querySelectorAll(".item").length;
    // 数量超了，并且，拖动元素不属于该页面，禁止拖放
    if (itemCount >= list_item_num && !isSameList) {
        return;
    }

    // 允许放置
    e.preventDefault();

    // 插入方向
    let inertAfter = false

    // 拖动元素初始位置
    const draggedRect = draggedElement.getBoundingClientRect();
    // 鼠标位置
    const mouseX = e.clientX;
    const mouseY = e.clientY;
    // 列表元素
    const curr_list_items = Array.from(targetList.children);
    let list_size = curr_list_items.length
    // 目前位置元素
    let insertBefore = 'none';
    let insertIndex = -1;
    if (list_size > 0) {
        // 列表最后一个元素位置
        let last_item = curr_list_items[list_size - 1]
        let last_item_rect = last_item.getBoundingClientRect();
        // 是否直接放在最后
        if (mouseY > (last_item_rect.bottom) ||
            (mouseX > (last_item_rect.right - 10) && mouseY > last_item_rect.top && mouseY < last_item_rect.bottom)) {
            // 没有在元素上，但是超过了最后一个元素下边界或有边界，设置目前位置元素为 null
            insertBefore = null;
        }
        // 不放最后，继续找目标
        // 鼠标在拖动元素的左边？右边？
        let mouse_is_left = mouseX < (draggedRect.left + (draggedRect.width / 2))
        let mouse_is_right = !mouse_is_left
        if (insertBefore === 'none') {
            for (let i = 0; i < list_size; i++) {
                // curr_list_item 对象：坐标信息
                const elementRect = curr_list_items[i].getBoundingClientRect();
                // curr_list_item 对象：是否同行
                let isSameRow = mouseY > elementRect.top && mouseY < elementRect.bottom;
                // 不是同行，直接跳过
                if (!isSameRow) continue
                // 向左插入
                if (mouse_is_left && mouseX < (elementRect.left + (elementRect.width / 2))) {
                    // 在某个元素上时，记录这个元素为目前位置元素
                    insertBefore = curr_list_items[i];
                    insertIndex = i
                    inertAfter = false
                    break;
                }
                // 向右插入
                if (mouse_is_right &&
                    mouseX > (elementRect.right - (elementRect.width / 2)) &&
                    mouseX < (elementRect.right + (elementRect.width / 2))) {
                    // 在某个元素上时，记录这个元素为目前位置元素
                    insertBefore = curr_list_items[i];
                    insertIndex = i
                    inertAfter = true
                    break;
                }
            }
        }
    } else {
        insertBefore = null
    }

    // 没有目标，直接退出
    if (insertBefore === 'none') {
        return
    }

    // 判断是不是和上个目标一样
    if (lastHoverElement === insertBefore && isSameList) {
        return
    } else {
        lastHoverElement = insertBefore
    }

    if (insertBefore) {
        // 位置索引不同，或者位置索引相同但页面不同
        if (insertIndex !== draggedIndex || !isSameList) {
            // 插入
            if (inertAfter) {
                targetList.insertBefore(draggedElement, insertBefore.nextSibling);
            } else {
                targetList.insertBefore(draggedElement, insertBefore);
            }
            draggedIndex = insertIndex;
        }
    } else {
        targetList.appendChild(draggedElement);
        draggedIndex = list_size;
    }
}

// 拖动结束事件处理函数
function handleDragEnd() {
    // 关闭翻页区域
    closeOptPageStyle()

    if (draggedElement) {
        // 数据信息重置
        draggedElement.classList.remove("dragging");
        draggedElement = null;
        draggedIndex = -1;

        // 检查所有页面，如果某个页面的 list 中没有 item，则删除该页面
        let pages = document.querySelectorAll('.page');
        for (let index = 0; index < pages.length; index++) {
            let page = pages[index]
            const list = page.querySelector(".list");
            if (list) {
                const items = list.querySelectorAll(".item");
                if (items.length === 0) {
                    page.remove()
                    // 如果删除的是当前或之前的页面。删除的是当前页面，正常来说不可能。特殊情况：当前是空页面，但是拖放位置不对，是无效拖放。
                    if (index <= current_list_index) {
                        // 直接滚动到上一页，也不用计算了
                        updatePage(-1)
                    }
                    // 如果删除的是后面的，不用处理
                }
            } else {
                page.remove()
                if (index <= current_list_index) {
                    updatePage(-1)
                }
            }
        }
        resetDianDianDian()
        // 执行：保存数据
        saveData()
    }
}

// 右键菜单事件处理函数
function HandleContextMenu(event) {
    // 阻止默认的右键菜单
    event.preventDefault();
    // 先关闭所有菜单
    const item_menu = document.getElementById('itemMenu');
    if (item_menu.style.display === 'flex') {
        item_menu.style.display = 'none';
    }
    const system_menu = document.getElementById('systemMenu');
    if (system_menu.style.display === 'flex') {
        system_menu.style.display = 'none';
    }
    // 使用 closest 方法判断点击的元素或其父级是否包含 class='item'
    const list_Item_icon = event.target.closest('.item-icon-div');
    const setting = event.target.closest('.setting');
    const editing = event.target.closest('.editing');
    if (list_Item_icon) {
        const list_Item = event.target.closest('.item');
        // 获取 list_Item 的边界信息
        const rect = list_Item.getBoundingClientRect();
        // 显示自定义菜单
        const item_menu = document.getElementById('itemMenu');
        item_menu.style.display = 'flex';
        item_menu.style.left = `${rect.right - 50}px`;
        item_menu.style.top = `${rect.bottom - 60}px`;
        // 获取点击元素信息
        const pageDiv = event.target.closest('.page');
        // 记录点击元素
        click_item = {
            pageId: pageDiv.id,
            id: list_Item.id
        }
        // 监听点击事件
        document.addEventListener('click', HandleClick);
    } else if (setting) {
        if (event.target.id === 'setting') {
            closeSettingDiv()
        }
    } else if (editing) {
        if (event.target.id === 'editing') {
            closeEditingDiv()
        }
    } else {
        // 显示自定义菜单
        const system_menu = document.getElementById('systemMenu');
        system_menu.style.display = 'flex';
        system_menu.style.left = `${event.clientX}px`;
        system_menu.style.top = `${event.clientY}px`;
        // 监听点击事件
        document.addEventListener('click', HandleClick);
    }
}

// 点击事件处理函数
function HandleClick(e) {
    // 设置页面打开中，如果不是点击的蒙版，则返回
    if (setting_open && e.target.id !== 'setting') {
        return;
    }
    // 编辑页面打开中，如果不是点击的蒙版，则返回
    if (editing_open && e.target.id !== 'editing') {
        return;
    }
    // 点击的是删除按钮
    if (e.target.id === 'optDeleteItem') {
        deleteItem()
    }
    // 点击的是编辑按钮，不需要取消点击事件件监听
    if (e.target.id === 'optEditItem') {
        const item_menu = document.getElementById('itemMenu');
        if (item_menu.style.display === 'flex') {
            item_menu.style.display = 'none';
        }
        openEditingDiv()
        return
    }
    // 点击的是编辑页面蒙层，关闭编辑页面
    if (e.target.id === 'editing') {
        // 关闭函数中执行移除点击事件监听
        closeEditingDiv()
        return
    }
    // 点击的是设置背景图片
    if (e.target.id === 'optBackgroundImage') {
        setBackgroundImage()
    }
    // 点击的是重置背景图片
    if (e.target.id === 'optResetBackgroundImage') {
        saveBackgroundImage('')
        applyBackgroundImage().then(() => {
        })
    }
    // 点击的是重置CSS
    if (e.target.id === 'optResetCSS') {
        resetCSSLocalStorage()
        window.location.reload()
    }
    // 点击的是设置操作。不需取消点击时事件监听。
    if (e.target.id === 'optSetting') {
        const system_menu = document.getElementById('systemMenu');
        if (system_menu.style.display === 'flex') {
            system_menu.style.display = 'none';
        }
        openSettingDiv()
        return
    }
    // 点击的是设置页面蒙层，关闭设置页面
    if (e.target.id === 'setting') {
        // 关闭函数中执行移除点击事件监听
        closeSettingDiv()
        return;
    }

    // 任意位置，关闭菜单
    const item_menu = document.getElementById('itemMenu');
    if (item_menu.style.display === 'flex') {
        item_menu.style.display = 'none';
    }
    const system_menu = document.getElementById('systemMenu');
    if (system_menu.style.display === 'flex') {
        system_menu.style.display = 'none';
    }

    // 移除监听
    document.removeEventListener('click', HandleClick);
}

// 删除导航元素item
function deleteItem() {
    if (!click_item) {
        return
    }
    const pagesData = getStorageNavData();

    let size = pagesData.length
    for (let i = 0; i < size; i++) {
        if (pagesData[i].pageId === click_item.pageId) {
            // 找到对应的 pageId 后，操作其 items 数组
            const items = pagesData[i].items;
            // 使用 filter 方法过滤掉需要删除的元素
            pagesData[i].items = items.filter(item => Number(item.id) !== Number(click_item.id));
            document.getElementById(click_item.id).remove()
            if ((items.length - 1) === 0) {
                // 删除数据
                pagesData.splice(i, 1);
                // 删除页面
                document.getElementById(click_item.pageId).remove()
                // 删除最后的页面，当前页面索引需要-1
                if (i === size - 1) {
                    current_list_index = current_list_index - 1
                }
            }
            break;
        }
    }

    saveData()
    resetDianDianDian()

    // 删除完成
    click_item = null
}

// 设置壁纸
function setBackgroundImage() {
    const fileInput = document.getElementById('fileInput');
    fileInput.click();
    // 用户选择文件后
    fileInput.addEventListener('change', async (e) => {
        const file = e.target.files[0];
        if (!file) return;

        try {
            const base64 = await fileToBase64(file);
            // 保存到扩展本地存储
            await saveBackgroundImage(base64);
            await applyBackgroundImage()
        } catch (err) {
            alert(e.message)
        }
    });
}

// 打开设置窗口
function openSettingDiv() {
    // 赋值
    document.getElementById('bg_brightness').textContent = String(getBackgroundImageBrightness());
    document.getElementById('slider_bg_brightness').value = getBackgroundImageBrightness();
    document.getElementById('grid_rows').textContent = getGridRows() + ' 行';
    document.getElementById('slider_grid_rows').value = getGridRows()
    document.getElementById('grid_columns').textContent = getGridColumns() + ' 列';
    document.getElementById('slider_grid_columns').value = getGridColumns()
    document.getElementById('grid_item_width').textContent = getGridItemWidth().replace('px', '');
    document.getElementById('slider_grid_item_width').value = getGridItemWidth().replace('px', '');
    document.getElementById('grid_item_height').textContent = getGridItemHeight().replace('px', '');
    document.getElementById('slider_grid_item_height').value = getGridItemHeight().replace('px', '');
    document.getElementById('grid_content_gap').textContent = getGridItemContentGap().replace('px', '');
    document.getElementById('slider_grid_content_gap').value = getGridItemContentGap().replace('px', '');
    document.getElementById('grid_icon_width').textContent = getGridItemIconWidth().replace('px', '');
    document.getElementById('slider_grid_icon_width').value = getGridItemIconWidth().replace('px', '');
    document.getElementById('grid_text_size').textContent = getGridItemTextSize().replace('px', '');
    document.getElementById('slider_grid_text_size').value = getGridItemTextSize().replace('px', '');
    if (getGridItemTextShow() === "none") {
        document.getElementById('showGridItemText').checked = false
        document.getElementById('hideGridItemText').checked = true
    } else {
        document.getElementById('showGridItemText').checked = true
        document.getElementById('hideGridItemText').checked = false
    }
    // 设置监听
    document.querySelectorAll('.setting-solid').forEach(s => {
        s.addEventListener('change', HandleSliderChange)
        s.addEventListener('input', HandleSliderInput)
    });
    document.querySelectorAll('.setting-radio').forEach(r => {
        r.addEventListener('change', HandleRadioChange)
    });
    // 显示
    document.getElementById('setting').style.visibility = 'visible';
    document.getElementById('settingPage').style.width = '420px'
    // 更新标识
    setting_open = true
}

// 关闭设置窗口
function closeSettingDiv() {
    // 移除监听
    document.querySelectorAll('.setting-solid').forEach(s => {
        s.removeEventListener('change', HandleSliderChange);
        s.removeEventListener('input', HandleSliderInput);
    });
    document.querySelectorAll('.setting-radio').forEach(r => {
        r.removeEventListener('change', HandleRadioChange)
    });
    // 隐藏
    document.getElementById('setting').style.visibility = 'hidden';
    document.getElementById('settingPage').style.width = '0px'
    // 更新标识
    setting_open = false
    document.removeEventListener('click', HandleClick);
}

// 更新导航网站信息
function updateItemInfo() {
    const uri = document.getElementById('input_web_url').value
    const text = document.getElementById('input_web_name').value
    const icon = document.getElementById('input_web_icon').value
    // 找对象，并更新数据库
    const pagesData = getStorageNavData();
    let size = pagesData.length
    for (let i = 0; i < size; i++) {
        if (pagesData[i].pageId === click_item.pageId) {
            // 找到对应的 pageId 后，操作其 items 数组
            const items = pagesData[i].items;
            for (let j = 0; j < items.length; j++) {
                if (items[j].id === click_item.id) {
                    items[j].text = text
                    items[j].uri = uri
                    items[j].icon = icon
                    break;
                }
            }
        }
    }
    saveDataToDB(pagesData)
    // 更新页面数据
    const itemDiv = document.getElementById(click_item.id)
    itemDiv.dataset.icon = icon
    itemDiv.dataset.text = text
    itemDiv.dataset.uri = uri
    let item_img_div = document.getElementById(click_item.id + '-icon-div')
    item_img_div.onclick = function () {
        openPage(uri)
    }
    let text_span = document.getElementById(click_item.id + '-span-text')
    text_span.textContent = text
    let item_img = document.getElementById(click_item.id + '-img')
    item_img.src = icon
    // 关闭窗口
    closeEditingDiv()
}

// 打开编辑窗口
function openEditingDiv() {
    // 获取点击项的详细信息
    let item = null;
    const pagesData = getStorageNavData();
    let size = pagesData.length
    for (let i = 0; i < size; i++) {
        if (pagesData[i].pageId === click_item.pageId) {
            // 找到对应的 pageId 后，操作其 items 数组
            const items = pagesData[i].items;
            // 使用 filter 方法过滤掉需要删除的元素
            item = items.find(item => Number(item.id) === Number(click_item.id));
        }
    }
    // 赋值
    document.getElementById('input_web_url').value = item.uri;
    document.getElementById('input_web_name').value = item.text;
    document.getElementById('input_web_icon').value = item.icon;
    // 显示
    document.getElementById('editing').style.visibility = 'visible';
    document.getElementById('editingPage').style.width = '420px'
    // 更新标识
    editing_open = true
}

// 关闭编辑窗口
function closeEditingDiv() {
    // 隐藏
    document.getElementById('editing').style.visibility = 'hidden';
    document.getElementById('editingPage').style.width = '0px'
    // 更新标识
    editing_open = false
    // 移除监听
    document.removeEventListener('click', HandleClick);
}

// 保存所有列表数据
function saveData() {
    // 获取每个列表的 data-id 并封装成数组
    const allLists = document.querySelectorAll(".list");
    const allDataIds = [];
    allLists.forEach(list => {
        const listDatas = [];
        list.querySelectorAll(".item").forEach((item) => {
            let id = item.getAttribute("data-id")
            let icon = item.getAttribute("data-icon")
            let text = item.getAttribute("data-text")
            let uri = item.getAttribute("data-uri")
            listDatas.push({
                id: id,
                text: text,
                uri: uri,
                icon: icon
            });
        });
        const pageDiv = list.closest('.page');
        allDataIds.push({
            pageId: pageDiv.id,
            items: listDatas
        });
    });

    // 保存数据
    saveDataToDB(allDataIds)
}

// 监听滑块输入
function HandleSliderInput(e) {
    switch (e.target.id) {
        case 'slider_bg_brightness':
            document.getElementById('bg_brightness').textContent = e.target.value;
            break;
        case 'slider_grid_rows':
            document.getElementById('grid_rows').textContent = e.target.value + ' 行';
            break;
        case 'slider_grid_columns':
            document.getElementById('grid_columns').textContent = e.target.value + ' 列';
            break;
        case 'slider_grid_item_width':
            document.getElementById('grid_item_width').textContent = e.target.value;
            break;
        case 'slider_grid_item_height':
            document.getElementById('grid_item_height').textContent = e.target.value;
            break;
        case 'slider_grid_content_gap':
            document.getElementById('grid_content_gap').textContent = e.target.value;
            break;
        case 'slider_grid_icon_width':
            document.getElementById('grid_icon_width').textContent = e.target.value;
            break;
        case 'slider_grid_text_size':
            document.getElementById('grid_text_size').textContent = e.target.value;
            break;
        default :
            console.error('未定义的滑块');
            break;
    }
}

// 监听滑块改变
function HandleSliderChange(e) {
    switch (e.target.id) {
        case 'slider_bg_brightness':
            saveAndApplyBackgroundImageBrightness(e.target.value)
            break;
        case 'slider_grid_rows':
            saveAndApplyGridRows(e.target.value)
            list_item_num = e.target.value * getGridColumns()
            break;
        case 'slider_grid_columns':
            saveAndApplyGridColumns(e.target.value)
            list_item_num = getGridRows() * e.target.value
            break;
        case 'slider_grid_item_width':
            saveAndApplyGridItemWidth(e.target.value)
            break;
        case 'slider_grid_item_height':
            saveAndApplyGridItemHeight(e.target.value)
            break;
        case 'slider_grid_content_gap':
            saveAndApplyGridItemContentGap(e.target.value)
            break;
        case 'slider_grid_icon_width':
            saveAndApplyGridItemIconWidth(e.target.value)
            break;
        case 'slider_grid_text_size':
            saveAndApplyGridItemTextSize(e.target.value)
            break;
        default :
            console.error('未定义的滑块');
            break;
    }
    recalculateNavDataAndReload()
}

// 监听单选框radio改变 [只有选中的才会触发：e 是选中项]
function HandleRadioChange(e) {
    switch (e.target.id) {
        case 'showGridItemText':
            saveAndApplyGridItemTextShow('block')
            break;
        case 'hideGridItemText':
            saveAndApplyGridItemTextShow('none')
            break;
        default :
            console.error('未定义的单选框');
            break;
    }
}

// 保存数据库
function saveDataToDB(data) {
    saveStorageNavData(data)
}

// 导出数据
function exportData() {
    let json = getAllDataFormatJson()
    exportJsonFile(JSON.stringify(json), 'new_tab_page_data.json').then(result => {
        showToast(result.message, result.success)
    })
}

// 导入数据
function importData() {
    importJsonFile().then(result => {
        if (result.success) {
            let res = rewriteDataForJsonFile(result.data)
            if (res.success) {
                window.location.reload()
            } else {
                showToast(res.message, res.success)
            }
        }
    })
}

// 切换搜索引擎
function switchSearch() {
    let list = getStorageSearchList()
    for (let i = 0; i < list.length; i++) {
        if (list[i].name === search_engine.name) {
            if (i < list.length - 1) {
                saveStorageSearchDef(list[i + 1])
            } else {
                saveStorageSearchDef(list[0])
            }
            break
        }
    }
    search_engine = getStorageSearchDef()
    document.getElementById("searchId").src = search_engine.icon
}

// 跳转到搜索页面
function goSearch() {
    let searchText = document.getElementById("searchInput").value.trim()
    if (searchText) {
        openPage(search_engine.url + encodeURIComponent(searchText))
    } else {
        showToast("请输入搜索内容", false)
    }
}

// 显示翻页区域特效
function showOptPageStyle() {
    let prePage = document.getElementById("prePage")
    prePage.classList.add('showOptPage')
    let nextPage = document.getElementById("nextPage")
    nextPage.classList.add('showOptPage')
}

// 隐藏翻页区域特效
function closeOptPageStyle() {
    let prePage = document.getElementById("prePage")
    prePage.classList.remove('showOptPage')
    let nextPage = document.getElementById("nextPage")
    nextPage.classList.remove('showOptPage')
}

// 设置动画状态
function setAnimation(target, status) {
    if (animationControls[target.id]) {
        if (status) {
            animationControls[target.id].enable();
        } else {
            animationControls[target.id].disable();
        }
    } else if (status) {
        animationControls[target.id] = autoAnimate(target, {
            key: node => node.dataset.key ?? node, // 优先用 data-key
        });
    }
}